<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%String path=request.getContextPath(); %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="<%=path %>/css/el.css">
<title>登录</title>
</head>
<body>
<form action="<%=path %>/loginServlet" class="login-form">
			<h1>心悦</h1>
			<div class="txtb" >
				<input type="text"  name="username" id="username"/>
				<span data-placeholder="账号"></span>
			</div>
			<div class="txtb" >
				<input type="password" name="password" id="password"/>
				<span data-placeholder="密码"></span>
			</div>
			<input type="submit" class="logbtn" value="登录" />
			<div class="back-content">
				没有账号？
				<a href="<%=path %>/login/es.jsp">注册一个</a>
				
			</div>
		</form>
		
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
		<script type="text/javascript">
			$(".txtb input").on("focus", function() {
				$(this).addClass("focus");
			});
			$(".txtb input").on("blur", function() {
				if($(this).val() == "")
					$(this).removeClass("focus");
			});
		</script>
		<div class="eyes">
			<div class="eye">
				<div class="ball"></div>
			</div>
			<div class="eye">
				<div class="ball"></div>
			</div>
		</div>
		<script>
			var balls = document.getElementsByClassName("ball");
			document.onmousemove = function() {
				var x = event.clientX * 100 / window.innerWidth + "%";
				var y = event.clientY * 100 / window.innerHeight + "%";
				for(var i = 0; i < 2; i++) {
					balls[i].style.left = x;
					balls[i].style.top = y;
					balls[i].style.transform = "translate(-" + x + ",-" + y + ")";
				}
			}
		</script>
</body>
</html>